<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>公司通讯录</title>
        <link rel="stylesheet" href="../css/bootstrap.css">
        <script src="../js/jquery-3.3.1.js"></script>
    </head>

    <body>
        
        <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">编号</th>
                <th scope="col">姓名</th>
                <th scope="col">电话</th>
                <th scope="col">部门</th>
              </tr>
            </thead>
            <tbody id="maillist">
              
            </tbody>
          </table>
          <nav aria-label="Page navigation example" class="page-main">
            <ul class="pagination" id="ul-pages">
              
            </ul>
          </nav>

      <script>
        let baseUrl = "http://localhost:8080/company"

          // -----------------分页数据展示-------------------
          let pageSize = 5;
          getPageInfo(1)
          
          // 获得分页数据, pageNum=第几页，参数2=每页显示数据量
          function getPageInfo(pageNum) {
            $.ajax({
              url: baseUrl + "/maillist",
              type: "post", //默认get
              dataType: "json",
              data: `pageNum=${pageNum}&pageSize=${pageSize}`,
              success: function(data){
                console.log(data)
                if(data.code == 200) {
                  // 动态渲染画面
                  showMaillists(data.pageInfo)
                  // 动态渲染分页按钮
                  showPages(pageNum, data.pageInfo.pages)
                }
              }
            })
          }
          
          // 动态渲染页面
          function showMaillists(pageInfo) {
            console.log(pageInfo)
            
            // 清空父容器
            $('#maillist').empty()
            
            // 对数据循环
            $(pageInfo.list).each(function(index, maillist) {
              // 根据数据，动态创建一行表格
              let trmaillist = $(`
                <tr>
                  <td>${maillist.id}</td>
                  <td>${maillist.name}</td>
                  <td>${maillist.number}</td>
                  <td>${maillist.department}</td>
                </tr>				
              `)
              // 将表格放入父容器
              $('#maillist').append(trmaillist)
            })				
          }	
          
          // ---------------- 动态分页 ------------------------
          function showPages(pageNum, pages) {
            // 清空父容器
            $('#ul-pages').empty()
            
            let sy = $(`
              <li class="page-item ${1 == pageNum ? 'disabled' : ''}">
                <a class="page-link" href="javascript:;" aria-label="Previous" 
                  onclick = "getPageInfo(1)">
                <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
            `)
            $('#ul-pages').append(sy)
            
            for (var i = 0; i < pages; i++) { 
              let pageStr = `
                <li class="page-item  ${i+1 == pageNum ? 'active' : ''} ">
                  <a  
                    class="page-link"
                    href="javascript:;"
                      onclick = "getPageInfo(${i+1})">${i+1}
                  </a>
                </li>
              `
              let page = $(pageStr)
              $('#ul-pages').append(page)
            }
            
            // getPageInfo
            let wy = $(`
              <li class="page-item ${pages == pageNum ? 'disabled' : ''}">
                <a class="page-link" href="javascript:;" aria-label="Next"
                  onclick = "getPageInfo(${pages})">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            `)
            $('#ul-pages').append(wy)
            
          }
      </script>
    </body>
</html>